<!-- 关键词推荐 -->
<template>
  <div class="re-layout">
    <div class="flex header">
      <el-select v-model="queryData.country" size="small" style="width: 158px;" @change="findOpenUpWords">
        <el-option label="中国市场" :value="'CN'"></el-option>
        <el-option label="海外市场" :value="'US'"></el-option>
      </el-select>
      <el-input v-model.trim="searchStr" size="small" placeholder="输入关键词拓词" class="input" @keyup.enter.native="handleSearch"></el-input>
      <el-button type="success" @click="handleSearch">拓词</el-button>
    </div>

    <el-table v-loading="isShow" :data="copyData" height="400px" element-loading-text="数据加载中" element-loading-spinner="el-icon-loading">
      <el-table-column align="center" width="50">
        <!-- 表头 -->
        <template slot="header" slot-scope="scope">
          <div class="add-icon pointer" @click="addWord(copyData)">
            <i class="el-icon-plus"></i>
          </div>
        </template>
        <!-- 主体 -->
        <template slot-scope="scope">
          <div class="add-icon pointer" @click="addWord([scope.row])">
            <i class="el-icon-plus"></i>
          </div>
        </template>
      </el-table-column>

      <el-table-column align="left" label="推荐">
        <template slot="header" slot-scope="scope">
          <div>推荐({{ copyData.length }})
          </div>
        </template>
        <template slot-scope="scope">
          <span v-html="scope.row.copyKeyword"></span>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="searchCount" label="流行度" width="80">
        <!-- 表头 -->
        <template slot-scope="scope">
          <div>{{ scope.row.asaPopular*1>0?scope.row.asaPopular*1:'-' }}</div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pag-box"
      :current-page.sync="currentPage1"
      :page-size="queryData.pageSize"
      background
      layout="total, prev, pager, next"
      :total="total"
      :pager-count="3"
      style="text-align:right;margin-top: 10px;position:relative;right: 20px;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>
<script>
import {

  findOpenUpWords // 拓词接口

} from '@/api/tool.js'
export default {
  name: '', // ·������
  props: {
    appid: {
      type: Number || String
    }
  },
  data() {
    return {
      timer: undefined,
      searchStr: '',
      tableData: [],
      copyData: [],
      total: 0,
      isShow: false,
      queryData: {
        country: 'US', // 国家
        order: 'descending', // 正序或者倒叙：descending、ascending
        prop: 'asaPopular', // 排序字段：asaPopular、asoSearch、searchCount、baiduPc、baiduMb、dySearch、ttSearch、googleSearch、youtubeSearch
        pageNum: 1,
        pageSize: 50,
        teamId: '',
        text: ''
      }
    }
  },
  computed: {

  },
  watch: {
    /* appid: { // �����Ķ���
                    deep: true, // ���ȼ�������Ϊ true
                    immediate: true,
                    handler: function(newV, oldV) {
                      if (newV) {
                        this.getWordFromAppId()
                      } else {
                        return false
                      }
                    }
                  } */
  },
  // ������
  created() {},
  // ���غ�
  mounted() {

  },
  // ���ٺ�
  destroyed() {

  },

  // ����
  methods: {
    // 分页
    handleSizeChange(val) {
      this.queryData.pageSize = val
      this.findOpenUpWords()
    },
    handleCurrentChange(val) {
      this.queryData.pageNum = val
      this.findOpenUpWords()
    },
    // 通过拓词接口获取推荐词
    async findOpenUpWords() {
      if (!this.queryData.text) return false
      this.isShow = true
      this.copyData = []
      this.tableData = []
      try {
        const res = await findOpenUpWords({
          ...this.queryData,
          teamId: this.$store.state.team.teamId
        })
        if (res.data.code * 1 === 20000 && res.data.data.list && res.data.data.list[0] !== null) {
          this.total = res.data.data.count
          this.isShow = false
          if (res.data.data.list <= 1) {
            const arr = res.data.data.list.map(item => {
              return {
                ...item,
                copyKeyword: item.keyword.replace(/\ /g, '&nbsp;')
              }
            })
            this.tableData = arr
            this.copyData = arr
          } else {
            const arr = res.data.data.list.splice(1, res.data.data.list.length)
            const arr1 = arr.map(item => {
              return {
                ...item,
                copyKeyword: item.keyword.replace(/\ /g, '&nbsp;')
              }
            })
            this.tableData = arr1
            this.copyData = arr1
          }
          // console.log(res, '你好')
        } else {
          this.isShow = false
          this.tableData = []
          this.copyData = []
        }
      } catch (err) {
        this.isShow = false
        this.tableData = []
        this.copyData = []
      }
    },

    handleSearch() {
      if (this.timer) {
        return false
      } else {
        this.queryData.text = this.searchStr
        this.queryData.pageNum = 1
        this.findOpenUpWords()
        this.timer = setTimeout(() => {
          clearTimeout(this.timer)
          this.timer = undefined
        }, 500)
      }
    },
    addWord(data) {
      if (data.length) {
        const arr = data.map(item => {
          return item.keyword
        })

        this.$emit('handleAdd', arr)
      } else {
        return false
      }
    }
  }
}
</script>

<style scoped lang="scss">
  @import "~@/styles/variables.scss";

  .re-layout {
     max-width: 396px;
    padding-right: 24px;
    margin-right: 24px;
    border-right: 1px solid #eee;

    .header {
      margin-bottom: 20px;
      justify-content: flex-start;

      .input {
        width: 280px;
        margin-right: 12px;
        margin-left: -2px;
      }
    }

    ::v-deep .add-icon {
      height: 16px;
      width: 16px;
      color: #FFFFFF;
      background-color: $mainColor1;
      line-height: 16px;
      font-size: 14px;
      text-align: center;
    }

    /deep/ .el-pagination.is-background .btn-next,
    /deep/ .el-pagination.is-background .btn-prev,
    /deep/ .el-pagination.is-background .el-pager li {
      min-width: 24px;
    }
  }
</style>
